{extend name='base' /}

{block name='main'}
<div class="main-panel">
    <div class="content">
        <div class="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="form-group form-inline">
                                <div class="col-md-12 p-0">
                                    <input type="text" autocomplete="off" class="form-control form-control" id="keyword" placeholder="请输入年级名称">
                                    <button type="button" class="btn btn-success" onclick="search();">搜索</button>
                                    {MyTag:auth rule="Classes/add"}<a href="{:url(\'add\')}" class="btn btn-primary">添加</a>{/MyTag:auth}
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="basic-datatables" class="display table table-striped table-hover">

                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name='js'}
<script>
    var dataTable = $('#basic-datatables').DataTable({
        autoWidth: false,
        ajax: function (data, callback, settings) {
            var param = {};
            param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.start = data.start;//开始的记录序号
            param.length = data.length;
            param.page = (data.start / data.length)+1;//当前页码
            param.draw = data.draw;
            param.keyword = $("#keyword").val();
            $.ajax({
                type: 'get',
                url: "{:url('classes/lst')}",
                cache: false,
                data: param,
                dataType: 'json',
                async: false,
                success: function (result) {
                    var returnData = {};
                    returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                    returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
                    returnData.recordsFiltered = result.recordsFiltered;//后台不实现过滤功能，每次查询均视作全部结果
                    returnData.data = result.data;//返回的数据列表
                    callback(returnData);
                }
            });
        },
        sPaginationType: "simple_numbers",
        paging: true,
        serverSide: true,
        order:[[1,'desc']],
        // pageLength: 1,
        ordering: false,
        // "info": false,
        searching: false,
        columns: [
            {data: "id", title: "ID"},
            {data: "name", title: "年级名称"},
            {data: "update_entered", title: "修改时间"},
            {data: "date_entered", title: "创建时间"},
            {
                "data": "id", "title": "操作", width: 120,"render": function (data, type, row) {
                    return '{MyTag:auth rule="Classes/edit"}<a href="{:url(\'edit\')}?id='+data+'"  class="btn btn-link btn-primary">编辑</a>{/MyTag:auth}' + '{MyTag:auth rule="Classes/del"}<button type="button" class="btn btn-link btn-danger" onclick="del('+data+')">删除</button>{/MyTag:auth}'
                }
            }
        ]
    });

    function del(id) {
        swal({
            title: '提示',
            text: "你确定要删除此项吗？",
            type: 'error',
            buttons:{
                cancel: {
                    visible: true,
                    text : '取消',
                    className: 'btn btn-danger'
                },
                confirm: {
                    text : '确定',
                    className : 'btn btn-success'
                }
            }
        }).then((willDelete) => {
            if (willDelete) {
                $.get("{:url('classes/del')}?id="+id, function (res) {
                    if(res.code == 1) {
                        dataTable.ajax.reload();
                    }else{
                        swal("提示", res.msg, {
                            icon : "error",
                            buttons: {
                                confirm: {
                                    className : 'btn btn-danger'
                                }
                            },
                        });
                    }
                }, 'json');
            }
        });
    }

    function search() {
        dataTable.ajax.reload();
    }
</script>
{/block}